<template>
  <div>
    <van-nav-bar
      :title="activeTitle"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <van-image
      fit="fill"
      width="9rem"
      height="9rem"
      :src="coverImgUrl"
      class="imgp"
    >
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <!-- 上滑进入 -->
    <transition name="van-slide-up">
      <div v-show="visible">
        <h3 class="sheettitle">
          <van-tag
            mark
            type="primary"
            color="rgb(49, 51, 52,0.5)"
            size="large"
            >{{ sheettitle }}</van-tag
          >
        </h3>
      </div>
    </transition>
    <van-cell
      class="hk"
      v-for="(item, index) in sheetlist"
      :key="index"
      @click="play(item.id)"
    >
      <h4>{{ index + 1 }} {{ item.name }}</h4>
      <span v-for="(data, index) in item.ar" :key="index" class="author">
        {{ data.name }}
      </span>
    </van-cell>
    <van-divider>我是有底线的</van-divider>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      sheetid: this.$route.query.id,
      sheetname: this.$route.query.sheetname,
      sheettitle: "",
      sheetlist: "",
      coverImgUrl: "",
      visible: false,
    };
  },
  mounted() {
    this.visible = true;
  },
  created() {
    // 获取歌单详情
    axios({
      url: "/playlist/detail",
      params: {
        id: this.sheetid,
      },
    }).then((res) => {
      this.sheettitle = res.data.playlist.creator.nickname;
      this.coverImgUrl = res.data.playlist.coverImgUrl;
      this.sheetlist = res.data.playlist.tracks;
    });
  },
  methods: {
    play(id) {
      this.$router.push({
        path: "/LookMusic",
        query: {
          id: id,
        },
      });
    },
    onClickLeft() {
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.imgp {
  margin-left: 20px;
}
.sheettitle {
  font-size: 18px;
  height: 20px;
  position: relative;
  left: 20px;
  bottom: 40px;
}
.hk :hover {
  color: #ec4141;
}
</style>